<template>
  <div class="container">
    <div class="tab">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="项目解读" name="first"></el-tab-pane>
        <el-tab-pane label="行业政策" name="second"></el-tab-pane>
        <el-tab-pane label="关于博鳌" name="third"></el-tab-pane>
        <el-tab-pane label="工具箱" name="fourth"></el-tab-pane>
      </el-tabs>
      <div class="search">
        <el-input v-model="search" style="width: 240px" placeholder="请输入" />
        <el-button @click="searchBtn" type="success">搜索</el-button>
      </div>
    </div>
    <div class="banner">
      <el-carousel interval="4000" height="500px">
        <el-carousel-item>
          <img src="../../assets/images/nav1.jpg" alt="" />
          <div style="position: absolute; top: 150px; left: 200px">
            <div style="margin-left: 20px">
              Whole-process engineering consultation
            </div>
            <div style="margin-top: 10px">
              <span style="font-size: 48px; font-weight: 500"
                >全过程工程咨询 </span
              ><span style="font-size: 20px">一站式项目全过程管理</span>
            </div>
            <div style="margin-top: 10px">
              <b style="font-size: 24px">严谨 | 标准 | 精细 | 专业</b>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <img src="../../assets/images/nav3.jpg" alt="" />
          <div
            style="
              position: absolute;
              top: 100px;
              right: 150px;
              display: flex;
              flex-direction: column;
              align-items: flex-end;
            "
          >
            <div style="font-size: 30px">
              博鳌项目管理致力于为企业提供全方位环保服务
            </div>
            <div style="margin-top: 20px; font-size: 48px">环境咨询</div>
            <el-button class="see_more" type="primary">查看更多</el-button>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <img src="../../assets/images/nav4.png" alt="" />
          <div style="position: absolute; top: 140px; left: 180px">
            <div style="font-size: 48px; color: #0d487e; font-weight: bold">
              项目策划
            </div>
            <div style="margin-top: 20px; font-size: 24px">
              项目前期策划对项目全生命周期甚至整个上层系统起到决定性作用
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <img src="../../assets/images/nav2.png" alt="" />
          <div class="caigou">
            <div style="font-size: 58px; font-weight: bold">招 标 采 购</div>
            <div style="font-size: 28px; margin-top: 10px">
              THE BIDDING PROCUREMENT
            </div>
            <div style="font-size: 28px; margin-top: 10px">
              公平 公正 公开 诚信
            </div>
            <el-button class="see_more" type="primary">点击查看</el-button>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="tabs_content">
      <div class="content" v-if="activeName === 'first'">
        <el-card style="max-height: 500px; overflow-y: auto;">
          <div class="essay"><div>文章列表</div></div>
          <p v-for="item in oneList" :key="item.id" class="text item" @click="downLoadone(item)">
            <div>{{ item.title }}</div>
            <div>{{ item.times }}</div>
          </p>
        </el-card>
      </div>
      <div class="content" v-else-if="activeName === 'second'">
        <el-card style="max-height: 500px; overflow-y: auto;">
          <div class="essay"><div>文章列表</div></div>
          <p v-for="item in twoList" :key="item.id" class="text item" @click="downLoadtwo(item)">
            <div>{{ item.title }}</div>
            <div>{{ item.times }}</div>
          </p>
        </el-card>
      </div>
      <div class="content" v-else-if="activeName === 'third'">
        <div class="container_box">
          <div class="jianjie_title">
            <div style="font-size: 28px; font-weight: bold">
              COMPANY PROFILE
            </div>
            <div style="font-size: 28px; margin-top: 20px">企业简介</div>
          </div>
          <div class="jianjie_container">
            <div class="jianjie">
              <p>
                河北博鳌项目管理有限公司创立于2002年，是一家集全过程咨询、项目管理、投资咨询、环保类技术服务、招标代理、审计造价、监理、综合验收等专项业务为一体的综合性项目咨询管理公司，业务范围辐射全国多个省市自治区，每年为数千项目提供专业化管理与咨询服务。
              </p>
              <p>
                公司经二十余载发展沉淀，在实战中锤炼出一支懂政策、专技术、善管理的专家业务团队。公司长期致力于以全过程咨询视角，提供给客户自项目前期策划至项目后评价全生命周期的高效、优质、专业服务，一站式解决客户核心问题，保证项目质量及投资收益。
              </p>
              <p>
                作为全过程咨询领域的引领者，公司于2016年在北京主办了“中国项目管理创新发展高峰论坛”，开启了项目管理向全过程咨询迈进的新篇章。
              </p>
              <p>
                博鳌拥有一支高素质实战专家队伍和完善的智能化服务系统。公司现有注册类工程师57人，高级工程师20人，注册会计师1人，并配备专业法务团队；公司特聘多位行业知名专家、学者、教授，组织开展行业政策研究、创新产品研发、技术难点攻坚等核心业务，并协同国内知名院校展开多维度合作机制；公司专家团队、外部专家团队、科研院所和知名院校等联合构成博鳌智库系统，为项目全过程实施保驾护航。
              </p>
              <p>
                博鳌同时拥有云平台管理系统，实现了决策科学化、管理制度化、程序规范化、办公自动化，为全方位、全过程的各项业务提供了有力的保障。
              </p>
            </div>
            <div class="logo_box">
              <img
                class="logo"
                src="//24655343.s21i.faiusr.com/4/ABUIABAEGAAgifGEpAYo1sbMiAcwzwo4lQM!500x500.png.webp"
                alt=""
              />
            </div>
          </div>
          <div class="jianjie_title">
            <div style="font-size: 28px; font-weight: bold">
              ENTERPRISE DEVELOPMENT
            </div>
            <div style="font-size: 28px; margin-top: 20px">发展历程</div>
          </div>
          <el-tabs tab-position="left" class="demo_tabs">
            <el-tab-pane label="全新跨越">
              <div style="margin-left: 80px">
                <div class="item_title">全新跨越</div>
                <p style="color: #409eff; font-weight: 600; margin-top: 30px">
                  2023
                </p>
                <p>获评“2023年度河北省招标投标协会诚信自律先进单位”</p>
                <p>获评“2023年度石家庄市招标代理先进企业”</p>
                <p>获评“2022-2023年石家庄市招标代理AAA信用企业”</p>
                <p style="color: #409eff; font-weight: 600">2022</p>
                <p>获评“2022年度河北省建设工程招标投标工作先进单位”</p>
                <p>获评“2021-2024工程招标代理机构AAA级信用企业</p>
                <p>获评“企业信用评价AAA级企业”</p>
                <p style="color: #409eff; font-weight: 600">2021</p>
                <p>
                  荣获“工程咨询单位建筑，农业、林业，市政公用工程，生态建设和环境工程甲级证书”
                </p>
                <p>获评“中国招投标协会企业信用度等级3A级证书”</p>
                <p>获评“中国土木工程学会工程招标代理机构3A级信用等级证书”</p>
                <p>获评“河北省建设工程招投标工作先进单位”</p>
                <p>获评“河北省建设工程招标投标诚实守信5A级代理机构”</p>
                <p>
                  获评“诚信经营示范3A级单位、企业信用3A级单位、企业资信3A级单位、质量服务诚信3A级单位、重服务守信用3A级单位、重合同守信用3A级单位、重质量守信用3A级单位”
                </p>
                <p style="color: #409eff; font-weight: 600">2020</p>
                <p>荣获“工程造价咨询企业资质乙级资格证书”</p>
                <p>荣获“工程监理乙级资格证书”</p>
                <p>获评“2020年度河北省建设工程招标投标工作先进单位”</p>
                <p>获评“企业信用评价AAA级企业”</p>
                <p style="color: #409eff; font-weight: 600">2019</p>
                <p>
                  荣获“工程咨询单位建筑，生态建设和环境工程甲级资信资质证书”
                </p>
                <p>荣获“工程咨询单位农业、林业乙级资信证书”</p>
                <p>荣获“工程咨询单位乙级资信资质证书”</p>
                <p>获评“2019年度河北省建设工程招标投标工作先进单位”</p>
                <p style="color: #409eff; font-weight: 600">2018</p>
                <p>被评为“2018-2020年度石家庄市招标代理诚信企业”</p>
                <p>获评"河北省建设工程招标投标诚实守信5A级代理机构"</p>
                <p>获评"企业信用评价3A级企业"</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="砥砺发展">
              <div style="margin-left: 80px">
                <div class="item_title">砥砺发展</div>
                <p style="color: #409eff; font-weight: 600; margin-top: 30px">
                  2017
                </p>
                <p>获评“2016-2017年度全国建设建设工程招标代理企业先进单位”</p>
                <p>获评“2017年度河北省建设工程招标投标诚实守信5A级代理机构”</p>
                <p style="color: #409eff; font-weight: 600">2016</p>
                <p>获评“第七届河北省环境科学学会理事单位”</p>
                <p>获评“2016-2018年度全国招标代理机构诚信先 进单位”</p>
                <p>获评“2016年度河北省招投标协会优秀单位“</p>
                <p>
                  博鳌在北京举行“2016首届中国项目管理创新发展高峰论坛新闻发布会暨PPP模式研讨会”
                </p>
                <p style="color: #409eff; font-weight: 600">2015</p>
                <p>荣获“建设项目环境监理行业乙级资格证书”</p>
                <p>荣获“工程咨询单位乙级资格证书”</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="求索创新">
              <div style="margin-left: 80px">
                <div class="item_title">求索创新</div>
                <p style="color: #409eff; font-weight: 600; margin-top: 30px">
                  2014
                </p>
                <p>荣获“环境工程设计认定证书”</p>
                <p>获评“2014年度河北省建设工程招标投标诚实守信5A级代理机构”</p>
                <p>成为省环保协会建设项目环境监理分会理事会员</p>
                <p style="color: #409eff; font-weight: 600">2013</p>
                <p>荣获“中央投资项目招标代理机构乙级资质证书”</p>
                <p style="color: #409eff; font-weight: 600">2012</p>
                <p>获评“河北省招投标协会第二届理事单位”</p>
                <p>荣获“环保工程专业承包三级资质”</p>
                <p style="color: #409eff; font-weight: 600">2011</p>
                <p>荣获“河北省清洁生产审核咨询服务机构”</p>
                <p>荣获“工程招标代理机构甲级资质证书”</p>
              </div>
            </el-tab-pane>
            <el-tab-pane label="创业伊始">
              <div style="margin-left: 80px">
                <div class="item_title">创业伊始</div>
                <p style="color: #409eff; font-weight: 600; margin-top: 30px">
                  2010
                </p>
                <p>荣获“政府采购代理甲级资质证书”</p>
                <p>荣获“国际招标机构乙级资格证书”</p>
                <p>获评“2010-2011年度河北省建设工程招标投标诚实守信代理机构”</p>
                <p>荣获“工程咨询单位丙级资格证书”</p>
                <p style="color: #409eff; font-weight: 600">2009</p>
                <p>
                  荣获“建设项目影响评价冶金机电、采掘、社会区域乙级资质证书”
                </p>
                <p style="color: #409eff; font-weight: 600">2008</p>
                <p>
                  荣获“环境影响评价、工程咨询、清洁生产审核ISO9001质量管理体系认证证书”
                </p>
                <p style="color: #409eff; font-weight: 600">2007</p>
                <p>荣获“工程招标代理机构乙级资质证书”</p>
                <p>荣获“工程造价乙级咨询企业资质证书”</p>
                <p style="color: #409eff; font-weight: 600">2006</p>
                <p>获评“石家庄招投标诚实守信单位”</p>
                <p>荣获“政府采购代理乙级资质证书”</p>
                <p style="color: #409eff; font-weight: 600">2002</p>
                <p>河北博鳌项目管理有限公司于石家庄成立</p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="content" v-else="activeName === 'fourth'">
        <el-card style="max-height: 500px; overflow-y: auto;">
          <div class="essay"><div>文章列表</div></div>
          <p v-for="item in threeList" :key="item.id" class="text item" @click="downLoadthree(item)">
            <div>{{ item.title }}</div>
            <div>{{ item.times }}</div>
          </p>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, watchEffect } from "vue";
import type { TabsPaneContext } from "element-plus";
import { knowledgeBaseListApi } from "@/api/knowledgeBase/index";
import { fileUploadApi } from "@/api/meeting/index";
const search = ref("");
const activeName = ref("first");
const oneList = ref([]);
const twoList = ref([]);
const threeList = ref([]);
const handleClick = (tab: TabsPaneContext, event: Event) => { 
};
const zskFileList = ref([])
const zskFileName = ref([])
// 获取知识库列表
const getKnowledgeBaseList = async () => {
  let params = {
    title: search.value
  }
  const res = await knowledgeBaseListApi(params);
  console.log(res);
  oneList.value = res.oneList;
  twoList.value = res.twoList;
  threeList.value = res.threeList;
};
const { proxy } = getCurrentInstance();
const downLoadone = async (val) => {
 proxy.$download.zip("/common/bantchDownload/fileIds?fileIds=" + val.filePath)
};
const downLoadtwo = async (val) => {
  proxy.$download.zip("/common/bantchDownload/fileIds?fileIds=" + val.filePath)
};
const downLoadthree = async (val) => {
  proxy.$download.zip("/common/bantchDownload/fileIds?fileIds=" + val.filePath)
};
const searchBtn = () => {
  getKnowledgeBaseList()
}
watchEffect(async () => {
  if(search.value) {
    await getKnowledgeBaseList()
  } else {
    await getKnowledgeBaseList()
  }
})
onMounted(async () => {
  await getKnowledgeBaseList();
});
</script>
<style lang="scss" scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.content {
  padding: 20px;
}
.banner {
  padding: 0 20px;
}
img {
  width: 100%;
  height: 100%;
}
.el-carousel-item {
  position: relative;
}
.see_more {
  width: 200px;
  height: 50px;
  margin-top: 30px;
}
.caigou {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.container_box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 168px 0 168px;
  .jianjie_title {
    margin-top: 50px;
  }
  .jianjie_container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    .jianjie {
      width: 536px;
      p {
        text-indent: 2em;
      }
    }
    .logo {
      width: 500px;
      height: 150px;
      margin-left: 80px;
    }
  }
  .demo_tabs {
    margin: 50px 0 0 0;
    .item_title {
      font-size: 22px;
      font-weight: bold;
    }
  }
}
.el-card {
  padding: 0 20px 0 20px;
  p {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 10px 0 10px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  p:hover{
    color: #009fe9;
    cursor: pointer
  }
  .essay {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #d3d3d3;
    div {
      width: 110px;
      font-weight: 600;
      text-align: center;
      padding: 0 20px;
      color: #009fe9;
      border-bottom: 2px solid #009fe9;
    }
  }
}
</style>
